<template>
    <div class="container" @mouseenter="isshow=true" @mouseleave="isshow=false" style="position: relative">
        <div>{{label}}</div>
        <template v-for="(item, index) in numberList">
            <div :key="index" class="number">{{item}}</div>
            <div class="dot" v-if="index == 0" :key="index + 'xxx'">,</div>
        </template>
        <div style="opacity: 0.72;">{{unit}}</div>
      <div class="popbox" v-if="popshow&&isshow">
        <h2>规上企业名单</h2>
        <div class="popcontent">
           <p v-for="(item,index) in qymd" :key="index">{{item}}</p>
        </div>

      </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      isshow:false,
      qymd:['横店影视股份有限公司',
        '东阳正午阳光影视有限公司',
        '浙江博纳影视制作有限公司',
        '华谊兄弟电影有限公司',
        '东阳欢娱影视文化有限公司',]
    }
  },
    props: {
        count: String|Number,
        label: String,
        unit: String,
        popshow:Boolean
    },
    computed: {
        numberList() {
            let mCount = this.count + "";
            let array = mCount.split("");
            let dif = 4 - array.length;
            let difArray = [];
            for(let i = 0; i < dif; i++) {
                array.unshift("0");
            }
            return array;
        }
    }
    // data() {
    //     return {
    //         numberList: []
    //     }
    // },
    // watch: {
    //     count(oldV, newV) {
    //         console.log(oldV)
    //         if(this.count) {
    //             this.numberList = this.count.split("");
    //         } else {
    //             this.numberList = []
    //         }
    //     }
    // }
}
</script>
<style lang="less" scoped>
.container {
    background-image: linear-gradient(270deg, rgba(8,132,255,0.00) 0%, rgba(8,132,255,0.24) 100%);
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 0 0 13px;
    margin-left: 20px;
}
.number {
    // border-image: linear-gradient(180deg, rgba(8,132,255,0.40) 0%, rgba(8,132,255,0.00) 51%, rgba(8,132,255,0.72) 100%);
    border-width: 1px;
    border-style: solid;
    border-color: red;
    font-family: DINPro-Medium;
    font-size: 20px;
    color: #64E6E2;
    letter-spacing: 1.2px;
    text-align: center;
    line-height: 28px;
    font-weight: 500;
    margin-right: 4px;
    width: 24px;
    height: 28px;
    border-image: linear-gradient(180deg, rgba(8,132,255,0.40) 0%, rgba(8,132,255,0.00) 51%, rgba(8,132,255,0.72) 100%) 1;
}
.dot {
    color: #64E6E2;
    font-size: 20px;
}

.popbox{
  width:246px;
  height:200px;
  position: absolute;
  right:0;
  top:50px;
  background-color: #01182A;
  background-image: url("../assets/lefttop.svg"),url("../assets/righttop.svg"),url("../assets/leftbottom.svg"),url("../assets/rightbottom.svg"),;
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
  background-position: left top,right top,left bottom,right bottom;
  border: 1px solid rgba(35,81,184,1);
  z-index: 99;
  .popcontent{
    padding:20px;
    height:100px;
    overflow: scroll;
    p{
      line-height: 24px;
      margin:0;
      padding-left:10px;
      font-size:16px;
      color:#fff;
      overflow: hidden;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;

    }
  }
}
.popbox h2{
  width:100%;
  height:40px;
  line-height: 40px;
  font-size: 18px;
  margin:0;
  padding:0;
  background-image: linear-gradient(269deg, rgba(0,178,255,0.00) 0%, rgba(8,132,255,0.24) 51%, rgba(0,178,255,0.00) 100%);
}
</style>
